import './ScreenLayout.css';
// import SupermarketAlarmPanel from './SupermarketAlarmPanel';
import { useNavigate } from 'react-router-dom';
import type { ReactNode } from 'react';

import MediaQuery from "react-responsive";

const navItemsLeft = [
  { label: "销售数据", path: "/sales" },
  { label: "全局筛选", path: "/filter" },
  { label: "库存警告", path: "/stock" },
];

const navItemsRight = [
  { label: "门店地图", path: "/map" },
  { label: "地球可视化", path: "/earth" },
  { label: "趋势预测", path: "/trend" },
];

export default function ScreenLayout({ children }: { children?: ReactNode }) {
  const navigate = useNavigate();

  return (
    <MediaQuery query="(min-width: 1024px)">
      <div className="screen-border">
        <div className="screen-content">
          {/* 顶部导航栏 */}
          <div className="screen-navbar">
            <div className="nav-left">
              {navItemsLeft.map((item, idx) => (
                <div
                  className="nav-item"
                  key={idx}
                  onClick={() => navigate(item.path)}
                style={{ cursor: "pointer", clipPath: "polygon(0% 0%, 88% 0%, 100% 100%, 12% 100%)" }}
              >
                {item.label}
              </div>
            ))}
          </div>
          <div className="nav-center">
            <div className="screen-title">
              <span className="title-main">智能超市数据分析系统</span>
              {/* <span className="title-sub">可视化</span> */}
            </div>
            {/* <button className="center-btn">查  询</button> */}
          </div>
          <div className="nav-right">
            {navItemsRight.map((item, idx) => (
              <div
                className="nav-item"
                key={idx}
                onClick={() => navigate(item.path)}
                style={{ cursor: "pointer" }}
              >
                {item.label}
              </div>
            ))}
          </div>
        </div>
        {/* 内容区 */}
        <div className="screen-main">{children}</div>
        {/* {children} */}
        {/* 底部科技感背景 */}
        <div className="screen-bottom-bg"></div>
      </div>
      </div>
    </MediaQuery>
  );
} 